/**
 * 九九乘法表，这里是你写代码的地方，其他的暂时不用管
 *
 * 问题：用document.write 写 span标签的样式没生效
 *   直接 return div 不知道怎么把span标签放div里面去                  【行，还不知道遍历数组】
 *   如果直接return span标签又会中断循环
 *
 * 思路：做一个九九乘法表，参考原型图 paint 软件
 *    1 * 1 = 1 1 * 2 = 2 1 * 3 = 3 ...
 *    2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 ...
 *    3 * 1 = 3 3 * 2 = 6 3 * 3 = 9 ...
 *    ...
 * 形式上是 y * x = xy y 表示纵轴的数字 从 1 - 9；x表示横轴数字 从 1 - 9
 * 令 y = 1; y < 10; y++ // y表示纵坐标乘数，也表示数组的横坐标数 也即是多少行的数据
 *   令 x = 1; x < 10; x++ // x表示横坐标乘数，也表示数组的纵坐标数 也即是多少列的数据
 * 两层循环即可遍历出二维数组，令结果 result = [
 *
 *  ['1 * 1 = 1', '1 * 2 = 2', ...],
 *  ['2 * 1 = 2', '2 * 2 = 4', ...],
 *  [], [], [], [], [], [], []]
 * 例如 result[y - 1][x - 1] 表示 y 行 x 列的数据，如 result[1 - 1][2 - 1] 等于 第一行 第二列，也就是 2 * 2 = 4
 * 这是算法内容，如何返回要的数据呢，字符串其实就可以当做结果，只要在外面加上标签包裹就行了
 * <span>{result[y][x]}</span>
 *
 * 先来解答第一个问题：document.write 写的 span 标签样式没生效            【行，老是不记得引入样式】
 */
import { useState } from 'react'
import { Input, Button } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import RenderTabItem from './RenderTabItem'
import './index.less'

const NineNineTable = () => {

  const { t } = useTranslation(['webGames'])

  // Array.from(Array(m), () => Array(n)) 方法可以构建二维数组，里面需要传递两个参数，第一个参数表示要创建的二维数组的行，第二个参数表示每个二维数组中行的列数
  // 固定用法，直接创建 m 行 n 列的数组                                   【没记住，先保留】
  // new Array(n) 方法可以构建一维数组 n 表示数组长度

  // const result: string[][] = Array.from(Array(9), () => Array(9))

  const [tableParams, setTableParams] = useState<TableParamsType>({
    row: 0,
    col: 0,
    result: []
  })

  const m = 9, n = 9
  const ninenineArray = Array.from(Array(m), () => Array(n))

  for (let rowIndex = 0; rowIndex < m; rowIndex++) {
    // ninenineArray[rowIndex][0] = ('1 x 1' + 1 * 1)
    // ninenineArray[rowIndex][1] = ('1 x 2' + 1 * 1)
    // ninenineArray[rowIndex][2] = ('1 x 2' + 1 * 1)
    for (let colIndex = 0; colIndex < n; colIndex++) {
      ninenineArray[rowIndex][colIndex] = `${rowIndex + 1} x ${colIndex + 1} = ${rowIndex + 1 * colIndex + 1}`
    }
  }

  console.log(ninenineArray)

  const onRowChange = (value: string) => {
    setTableParams({
      ...tableParams,
      row: Number(value)
    })
  }

  const onColChange = (value: string) => {
    setTableParams({
      ...tableParams,
      col: Number(value)
    })
  }

  const createMultiplyTable = () => {
    let row = tableParams.row
    let col = tableParams.col
    let _result = Array.from(Array(row), () => Array(col))

    for (let rowIndex = 1; rowIndex <= row; rowIndex++) {
      for (let colIndex = 1; colIndex <= col; colIndex++) {
        _result[rowIndex - 1][colIndex - 1] = rowIndex + ' * ' + colIndex + ' = ' + rowIndex * colIndex
      }
    }

    console.table(_result)

    setTableParams({
      ...tableParams,
      result: _result
    })
  }

  return <div id='nine-nine-table' className='nine-nine-table'>
    <div className='input-create-multiply-table-params'>
      <span>{t('practice.nineNineTable.inputRowNumber')}：</span><Input className='row-input' maxlength={1} autoWidth onChange={onRowChange} placeholder={t('practice.nineNineTable.inputRowNumber')}/>
      <span>{t('practice.nineNineTable.inputColNumber')}：</span><Input className='col-input' maxlength={1} autoWidth onChange={onColChange} placeholder={t('practice.nineNineTable.inputColNumber')}/>
      <Button className='create-multiply-table-btn' onClick={() => { createMultiplyTable() }}>{t('practice.nineNineTable.createTable')}</Button>
    </div>
    <RenderTabItem tableParams={tableParams}/>
  </div>
}

export default NineNineTable
